<template>
  <div class="content">
    <!-- <button @click="getFood">获取食物数据</button> -->
    <div class="elementName">{{ item.name }}</div>
    <div class="mainText marginTop"> {{ item.main_text }}</div>
    <div class="originFood marginTop">
      <div class="title">摄入来源:</div>
      <addList v-if="id" v-model="item.origin_food" query-type="ingredient" :show-by-id="id"></addList>
    </div>
    <div class="originSelect marginTop">
      <div class="title">摄入选择:</div>
      <div>{{ item.origin_select }}</div>
    </div>
    <div class="originCount marginTop">
      <div class="title">含量计算:</div>
      <div>{{ item.origin_select }}</div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import { getElementById, queryAllFood } from './api.js'
import addList from '@/components/addList/index.vue'

let id = reactive('')
const item = ref({})
const foodlists = ref([])
let ids = reactive('')
onMounted(() => {
  const route = useRoute()
  id = route.query.id
  getInfo()

})

const getInfo = () => {
  if (!id) return
  getElementById(id).then(res => {
    item.value = res.result[0]
    // ids=item.value.origin_food
    // queryAllFood().then(res=>{
    //   console.log(typeof(res.result), res.result)
    //   if (res.result.length) {
    //     // forEach循环遍历数组的元素用row接收
    //     res.result.forEach((row)=>{
    //       if (!row.nutrition_list) return
    //       // 把row下的nutrition_list转成js对象
    //       const list = JSON.parse(row.nutrition_list)
    //       // 查找id相等的数据存到obj
    //       const obj = list.find(item => item.id === id)
    //       if(obj){
    //         console.log(row)
    //         // 把obj下边拿到的weight复制到row下
    //         row.weight=obj.weight
    //       }
    //     })
    //   }
    // })
  })
}

</script>

<style lang="scss" scoped>
.marginTop {
  margin-top: 50px;
  line-height: 20px;
}

.content {
  padding: 20px 15px;
  text-align: left;
  font-size: 14px;
  letter-spacing: 2px;
}

.title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
}

.elementName {
  font-size: 20px;
  font-weight: 500;
}

.mainText {}

.originFood {}

.originSelect {}

.originCount {}
</style>